<template>
    <div v-if="visible" class="popup">
      
      <div class="popup-content">
        <i class="el-icon-close close-button" @click="closePopup"></i>
       <h2>{{ room.room_id }}</h2>
       <ul>
        <li>宿舍楼：{{ room.building_id }}号楼</li>
        <li>可选性别：{{ genderConvert(room.room_gender) }}</li>
        <li>几人间：{{ room.room_type }}人间</li>
       </ul>
       <div v-if="captchaVisible">
       <hr>
        <!-- <p>输入验证码</p> -->
        <el-form  label-position="top" :rules=rules ref="orderForm" :model="form">
          <el-form-item  label="请输入验证码" prop="captchaText">
        <ShowCaptcha ref="captcha" :room_id="room.room_id" class="captcha"></ShowCaptcha>
        <el-input placeholder="输入验证码" v-model="form.captchaText" style="width: 40%;margin:10px"></el-input>
        <el-button @click="do_getSeckillPath"  :loading="confirmLoading" :disabled="isNotAble" type="primary">提交</el-button>
      </el-form-item>
      </el-form>  
      </div>
      </div>

      </div>
        
        
       
      
    
</template>
<script>
import ShowCaptcha from '@/components/ShowCaptcha.vue';
import  {book, getResult,getSeckillPath} from '@/api/order.js'
import { genderConvert } from '@/utils/convert';



export default {
  components:{
    // CountDown
    ShowCaptcha
  },
  props:["room","visible",'captcha-visible'],
  data() {
      return {
        form:{
         captchaText:""},
         rules:{
        captchaText: [ 
          { required: true, message: '验证码不可为空', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        
        
         },
         confirmLoading:false,
     
         
         
  
        
    }},
   mounted(){
    //监听是否到达可点按钮的时间
    this.$root.Bus.$on('isNotAble',value=>{
      this.isNotAble=value
      
    
    })
   },
    methods:{
      closePopup() {
      this.$emit('close');
    },
    do_getSeckillPath(){
      

      
      // alert(this.captchaText)
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          
          getSeckillPath(this.room.room_id,this.form.captchaText).then(res=>{
        if(res.code==200){
          this.bookRoom(res.data);
        }
        else 
          this.$message.error(res.msg);
          this.$refs.captcha.refreshCaptcha();
      })
        }
      })
      
    },
    bookRoom(path){
            this.showCaptcha=true;
            book(this.room,path).then(res=>{
              if(res.code==200){
                this.get_Result();
              }

              else if (res.code==500501){ 

                     this.$emit('close')
                    this.$confirm(res.msg+"，是否查看订单","提示").then(()=>{
                    //跳转到订单页面
                    this.$router.push("/getOrder")
                    }).catch(()=>{})
                    }
              
              else this.$message.error(res.msg)
            })
           
          },
      
      genderConvert(value){
      return genderConvert(value)
    },
    get_Result(){
      var that=this
      this.confirmLoading=true;
    getResult(this.room).then(res=>{
      if(res.code==200){
                    //排队中
                    if(res.data==0){
                    //  this.$message.info("排队中")
                      setTimeout(function(){
                      that.get_Result();
                    },50)
                    }

                    else if(res.data<0) {
                      this.confirmLoading=false;
                      this.$message.info("对不起，选择宿舍失败！")
                    
                    }
                    //成功
                    else  {
                      this.confirmLoading=false;
                      this.$emit('close')
                    
                      this.$confirm('恭喜！选择宿舍成功，是否查看订单', '提示').then(()=>{
                        this.$emit('close')
                  
                    //跳转到订单页面
                    this.$router.push("/getOrder")}
                    ).catch(()=>{})

                  }}
                  else if (res.code==500501){ 

this.$emit('close')
this.$confirm(res.msg+"，是否查看订单","提示").then(()=>{
//跳转到订单页面
this.$router.push("/getOrder")
}).catch(()=>{})
}
                  else {
                    this.confirmLoading=false;
                    this.$message.error(res.msg);
                  }
                  
                
            })
    }
  }}
  
  
  </script>


<style scoped>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.popup-content {
  position: absolute;
  background: #fff;
  padding: 50px;
  border-radius: 5px;
 

}
 
.close-button {
  /* height: 100px; */
  position: absolute;
  top: 10px;
  right: 10px;
  /* right: 5px;
  top: 2px; */
}
el-message{
  top:20px
}
</style>
